<template>
  <div class="create-account">
    <common-breadcrumb :crumb="crumb"></common-breadcrumb>
    <el-card>
      <el-form
        :model="accountForm"
        :rules="accroutFormRule"
        ref="accountFormRef"
      >
        <el-form-item label="用户名" label-width="80px" prop="username">
          <el-input v-model="accountForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="password">
          <el-input type="password" v-model="accountForm.password"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="80px">
          <el-input v-model="accountForm.contact"></el-input>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button type="primary" size="medium" @click="createAccount">添加账号</el-button>
        </el-form-item>
       </el-form>
    </el-card>
  </div>
</template>

<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  components: {
    commonBreadcrumb
  },
  data () {
    return {
      crumb: ['管理', '添加账号'],
      accountForm: {
        username: '',
        password: '',
        contact: ''
      },
      accroutFormRule: {
        username: [
          { required: true, message: '用户名必填', trigger: 'blur' },
          { max: 50, message: '用户名不能超过50个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async createAccount () {
      const { data: res } = await this.$axios.post('user', this.accountForm)
      if (res.code === 1) {
        const result = await this.$confirm('添加成功, 不否继续添加账号?', '提示', {
          confirmButtonText: '继续添加账号',
          cancelButtonText: '取消',
          type: 'success'
        }).catch(err => err)
        if (result === 'confirm') {
          this.$refs.accountFormRef.resetFields()
        } else {
          this.$router.push('/admin/accountlist')
        }
        return false
      }
      console.log(res)
      this.$message.error(`添加失败, ${res.msg}`)
    }
  }
}
</script>
